<template>
  <div class="face-main">
    <div class="faceMain">
    </div>
    <button v-loading="backLoading" class="btn" @click="backReturn"> 返回登录
    </button>
  </div>
</template>

<script>
//  初次加载会很慢，请耐心等待，
// face-effet插件官网：https://faceeffet.com/
import 'face-effet/effet/effet.css'
import effet from 'face-effet/effet/effet'
export default {
  name: "index",
  data(){
    return{
      faceEffet:effet,
      backLoading:false,
    }
  },
  beforeDestroy(){
    if (this.faceEffet){
      this.faceEffet.close();
    }
  },
  mounted() {
    this.faceEffet.init({
      el:'faceMain',
      callBack:this.callBack
    })
  },
  methods:{
    callBack(data){
      if (data.progressMessage === 'success'){ // 判断阶段是否成功
        if (!data.base64Array || data.base64Array.length === 0){
          return;
        }
        Promise.all(data.base64Array).then((base64Strings) => {
          // 人脸数据：base64Strings
          // 这里调用后端
          if (base64Strings){
            this.faceEffet.close();
            setTimeout(()=>{
              this.$router.push({
                path:'/main',
                query:{
                  base64:base64Strings[0]
                }
              });
              const screenWidth = window.screen.width;
              const screenHeight = window.screen.height;
              window.ipcRenderer.send('toMain',{
                username:'xxxxx',
                token:'',
                screenWidth:screenWidth,
                screenHeight:screenHeight
              })

            },1000)
          }
        }).catch((error) => {
          console.error("Error resolving promises:", error);
        });
      }
    },
    backReturn(){
      if (this.backLoading){
        return
      }
      // 先销毁人脸容器
      this.faceEffet.close();
      this.backLoading = true
      // 等待1s后跳转
      setTimeout(()=>{
        this.backLoading = false
        this.$router.push('/login');
      },1000)

    }
  }
}
</script>

<style>
@import "./index.css";
</style>
